<template>
  <el-dialog
    title="数据库账户管理"
    :visible="visible"
    width="640px"
    @close="handleClose"
    @open="handleOpen"
  >
    <el-table :data="accounts">
      <el-table-column prop="dbuser" label="用户名" width="120">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.editable"
            v-model="scope.row.dbuser"
          ></el-input>
          <span v-else>{{ scope.row.dbuser }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="dbpassword" label="密码" width="120">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.editable"
            v-model="scope.row.dbpassword"
          ></el-input>
          <span v-else>{{ scope.row.dbpassword }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="isinstance" label="是否实例用户" width="120">
        <template slot-scope="scope">
          <el-select
            v-if="scope.row.editable"
            v-model="scope.row.isinstance"
            placeholder="请选择"
          >
            <el-option
              v-for="item in isInstanceOptions"
              :label="item.label"
              :key="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
          <span v-else>{{ scope.row.isinstance == 1 ? "是" : "否" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" align="center">
        <template slot="header">
          <el-button type="text" size="mini" @click="createAccount"
            >新增账户</el-button
          >
        </template>
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            class="bg-success"
            icon="el-icon-check"
            @click="handleSave(scope.$index, scope.row)"
            >保存</el-button
          >
          <el-button
            type="text"
            class="bg-danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleOk">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import service from "../../api/service.js";

export default {
  props: { visible: Boolean, hostid: Number },
  data() {
    return {
      accounts: [],
      isInstanceOptions: [
        { label: "是", value: 1 },
        { label: "否", value: 0 }
      ]
    };
  },
  methods: {
    handleOpen() {
      let _this = this;
      service.getDbAccounts(this.hostid).then(resp => {
        if (resp) {
          resp.forEach(el => {
            el.editable = false;
          });
          this.accounts = resp;
        }
      });
    },
    handleClose() {
      this.$emit("close-account-dialog");
    },
    handleOk() {
      if (this.accounts.findIndex(s => s.editable) == -1) {
        this.$emit("close-account-dialog");
      } else {
        this.$message({
          message: "有数据未保存，请先进行保存操作",
          type: "warning"
        });
      }
    },
    createAccount() {
      this.accounts.push({
        id: 0,
        hostid: 0,
        dbuser: "",
        dbpassword: "",
        editable: true
      });
    },
    handleSave(index, row) {
      if (row.editable) {
        row.editable = false;
        if (row.dbuser && row.dbpassword) {
          if (row.id == 0) {
            row.hostid = this.hostid;
            service.createDbAccount(row).then(resp => {
              if (resp) {
                this.$message({
                  message: "数据保存成功",
                  type: "success"
                });
                row.id = resp.id;
              }
            });
          } else {
            service.updateDbAccount(row).then(resp => {
              if (resp) {
                this.$message({
                  message: "数据保存成功",
                  type: "success"
                });
              }
            });
          }
        } else {
          this.$message({
            message: "请输入完整信息",
            type: "warning"
          });
        }
      }
    },
    handleEdit(index, row) {
      row.editable = true;
    },
    handleDelete(index, row) {
      this.accounts.splice(index, 1);
    }
  }
};
</script>

<style>
</style>